
<template>
  <div class="shoye">
    <div class="top-item">
      <div class="home">
        <div class="sayHello">{{timeText}}</div>
        <div v-if="isLogin"
             class="usName"
             @click="goPersonalData">{{userInfo.nickName}}</div>
        <div v-else
             class="usName"
             @click="goLogin">去登录</div>
      </div>
      <van-search @click="goSearch"
                  class="searchbox"
                  v-model="Avalue"
                  placeholder="请输入搜索关键词"
                  input-align="center" />
    </div>

    <van-swipe class="banner"
               :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images"
                      :key="index">
        <img class="banner-img"
             v-lazy="item.bannerImg" />
      </van-swipe-item>
    </van-swipe>

    <lazy-component>
      <div class="iHot">
        <div class="HOT">
          <van-icon class="fire"
                    name="fire"
                    color="#f00" />热门推荐
        </div>

        <div class="product">
          <div class="product-item"
               v-for="(item, index) in product"
               :key="index"
               @click="viewProDetail(item.pid)">
            <span class="ithot">hot</span>
            <div>
              <img class="auto-img"
                   :src="item.smallImg"
                   alt=""
                   v-lazy="item.smallImg">
            </div>
            <div class="name">{{item.name}}</div>
            <div class="enname">{{item.enname}}</div>
            <div class="price"> &yen; {{item.price}}</div>
          </div>
        </div>
      </div>
    </lazy-component>
  </div>
</template>

<script>
export default {
  name: "Shoye",

  data () {
    return {
      // 登录状态
      isLogin: true,

      Avalue: '',
      list: [],
      product: [],
      images: [],

      // 时间文本
      timeText: '',

      userInfo: {
        //简介
        desc: '',
        // 用户名字
        nickName: '',
        // 用户背景图片
        userBg: '',
        // 用户头像
        userImg: ''
      }
    }
  },

  created () {
    this.getHotProduct();
    this.getBanner()
    this.getMyData()
    this.getCurrentTime()
  },

  methods: {
    // 跳转到个人资料
    goPersonalData () {
      this.$router.push({ name: 'PersonalData' })
    },

    // 去登录
    goLogin () {
      if (this.isLogin == false) {
        this.$router.push({ name: 'Login' })
      }
    },

    // 搜索页
    goSearch () {
      this.$router.push({ name: 'Search' })
    },

    // 获取当前时间
    getCurrentTime () {
      let date = new Date();
      //获取小时
      let hours = date.getHours();


      if (hours >= 19) {
        //晚上
        this.timeText = '晚上好';
      } else if (hours >= 15) {
        //下午
        this.timeText = '下午好';
      } else if (hours >= 11) {
        //中午
        this.timeText = '中午好';
      } else if (hours >= 7) {
        //上午
        this.timeText = '上午好';
      } else {
        //凌晨
        this.timeText = '凌晨好';
      }
    },

    // 获取个人信息
    getMyData () {
      this.axios({
        method: 'get',
        url: '/findMy'
      }).then(result => {

        if (result.data.code == 700) {
          this.isLogin = false
          return;

        }
        if (result.data.code == 'A001') {
          this.userInfo = result.data.result[0]
        }
      })
    },

    // 轮播图
    getBanner () {
      this.axios({
        method: 'get',
        url: '/banner',
      }).then(result => {
        if (result.data.code == 300) {
          this.images = result.data.result
        }

      })
    },

    getHotProduct () {
      this.axios({
        method: 'get',
        url: '/type',

      }).then(result => {
        let res = result.data.result
        res.forEach(ele => {
          this.axios({
            method: 'get',
            url: '/typeProducts',

            params: {
              key: 'type',
              value: ele.type,
            }
          }).then(result => {
            let IsHots = result.data.result

            IsHots.forEach(ele => {
              if (ele.isHot == 1) {
                this.product.push(ele)
              }
            })
          })

        })

      })
    },

    viewProDetail (pid) {
      this.$router.push({ name: 'GoodsDetails', params: { pid } });
    }

  }

}
</script>

<style lang="scss" scoped>
.shoye {
  padding-top: 83px;
  padding-bottom: 50px;
  .top-item {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 30px;
    background-color: #0c34ba;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .searchbox {
      width: 260px;
      background-color: #0c34ba;
    }
    .sayHello {
      color: #fff;
    }
    .home {
      width: calc(100% - 280px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .usName {
        font-size: 15px;
        color: #00ffff;
        font-weight: bold;
        width: 55px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .banner {
    width: 100%;
    height: 260px;
    .banner-img {
      width: 100%;
      height: 100%;
    }
  }
  .HOT {
    margin: 10px 0 -5px 10px;
  }
  .product {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    .product-item {
      //使最后一个没有右边框
      width: calc(54% - 20px);
      background-color: #fff;
      margin-bottom: 10px;
      margin-right: 10px;
      padding: 10px;
      position: relative;
      border-radius: 8px;

      .ithot {
        position: absolute;
        left: 25px;
        background-color: #0c34ba;
        padding: 5px 5px;
        color: #fff;
        border-radius: 0 0 5px 5px;
      }

      &:nth-child(2n) {
        margin-right: 0;
      }
      .auto-img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
      }
      .name {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #6e6e6e;
      }
      .enname {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #848484;
      }
      .price {
        color: #0c34ba;
        font-weight: bold;
      }
    }
  }
}
</style>